<template>
    <div class="header" ref="header">
        <div class="header-logo">
            <img src="https://cdn.shopify.com/s/files/1/0651/8321/9852/files/cagau-logo-white.png?v=1721471233&width=70"
                alt="">
        </div>
        <div class="header-navigation">
            <ul class="flex list-menu">
                <li v-for="(item, index) in listMenu" :key="index">
                    <span class="btn-text" data-text="">{{ item.title }}</span>
                </li>
            </ul>
        </div>

        <div class="header-icons">
            <span class="search"> <svg class="icon icon-search icon-lg" viewBox="0 0 24 24" stroke="currentColor"
                    fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round"
                        d="m21 21-3.636-3.636m0 0A9 9 0 1 0 4.636 4.636a9 9 0 0 0 12.728 12.728Z">
                    </path>
                </svg></span>
            <span class="account">
                <svg class="icon icon-account icon-lg" viewBox="0 0 24 24" stroke="currentColor" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <rect width="10.5" height="10.5" x="6.75" y="1.75" rx="5.25"></rect>
                    <path stroke-linecap="round"
                        d="M12 15.5c1.5 0 4 .333 4.5.5.5.167 3.7.8 4.5 2 1 1.5 1 2 1 4m-10-6.5c-1.5 0-4 .333-4.5.5-.5.167-3.7.8-4.5 2-1 1.5-1 2-1 4">
                    </path>
                </svg>
            </span>
            <span class="cart">
                <svg class="icon icon-cart icon-lg" viewBox="0 0 24 24" stroke="currentColor" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M1 1h.5v0c.226 0 .339 0 .44.007a3 3 0 0 1 2.62 1.976c.034.095.065.204.127.42l.17.597m0 0 1.817 6.358c.475 1.664.713 2.496 1.198 3.114a4 4 0 0 0 1.633 1.231c.727.297 1.592.297 3.322.297h2.285c1.75 0 2.626 0 3.359-.302a4 4 0 0 0 1.64-1.253c.484-.627.715-1.472 1.175-3.161l.06-.221c.563-2.061.844-3.092.605-3.906a3 3 0 0 0-1.308-1.713C19.92 4 18.853 4 16.716 4H4.857ZM12 20a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm8 0a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z">
                    </path>
                </svg>
            </span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Header',

    data() {
        return {
            listMenu: [
                {
                    title: "Watches"
                }, {
                    title: "Customize My Watch"
                }, {
                    title: "Sourcing"
                }, {
                    title: "Jewelry"
                }, {
                    title: "About Us"
                }, {
                    title: "News"
                },
            ]
        };
    },

    mounted() {
        window.addEventListener("scroll", (e) => {
            // this.$nextTick(() => {
            //     if (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop > 70) {
            //         console.log(this.$refs.header.style);
            //         this.$refs.header.style.backgroundColor = "#fff"
            //         this.$refs.header.style.color = "black"
            //         this.$refs.header.style.width = "100%"
            //         this.$refs.header.style.position = "sticky"
            //         this.$refs.header.style.zIndex = "999999"
            //         // fixed
            //         this.$refs.header.style.transition = "backgroundColor position 1s ease-in-out"


            //     } else {
            //         this.$refs.header.style.backgroundColor = "transparent"
            //         this.$refs.header.style.position = "absolute"
            //         this.$refs.header.style.color = "#FFF"
            //         this.$refs.header.style.transition = "backgroundColor position 1s ease-in-out"
            //     }
            // },1000)

        })
    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
.header {
    width: calc(100% - 60px);
    height: 108px;
    margin: 0 auto;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
    position: absolute;
    margin: 0 auto;
    transition: position background 1s;
    z-index: 99999;

    .header-logo {
        img {}
    }

    .header-navigation {
        .flex {
            display: flex;

            li {
                display: flex;
                margin: 0 25px;

                .btn-text {
                    font-size: 18px;
                }

                .btn-duplicate {}
            }
        }

        .list-menu {}
    }

    .header-icons {
        span {
            margin: 10px;
        }

        .search {
            .icon {}

            .icon-search {}

            .icon-lg {
                width: 1.5rem;
                height: 1.5rem;
            }
        }

        .account {
            .icon {}

            .icon-account {}

            .icon-lg {
                width: 1.5rem;
                height: 1.5rem;
            }
        }

        .cart {
            .icon {}

            .icon-cart {}

            .icon-lg {
                width: 1.5rem;
                height: 1.5rem;
            }
        }
    }
}
</style>